<template>
	<!-- 我是登录页 -->
	<view class="top" ref="top"></view>
	<view class="content">
		<view class="content-top">
			<text>有度税智·发票助手</text>
		</view>
		<view class="inputbox">
			<view class="inputbox-top">
				<text class="inputlabel">手机号</text>
				<uni-easyinput class="uni-mt-5" trim="all" v-model="phoneNumber" maxlength="11" type="number" placeholder="请输入手机号"></uni-easyinput>
			</view>
			<view class="inputbox-top">
				<text class="inputlabel">验证码</text>
				<uni-easyinput class="uni-mt-5" trim="all" v-model="code" type="number" placeholder="请输入验证码" :clearable="false"></uni-easyinput>
				<view v-if="codeShow" class="sendm" @click="handleSendCode">{{btntext}}</view>
				<view v-else class="seconds">{{btntext}}</view>
			</view>
			<view class="fontbox">
				<view class="radiobox" :class="radioType ? 'bluebg':'borderbox'" @click="radioType = true">
					<uni-icons type="checkmarkempty" size="12" color="#fff"></uni-icons>
				</view>
				<text>已阅读并同意</text>
				<text class="bluefont" @click="handleAgreement('person')">《用户注册协议》</text>
				<text>和</text>
				<text class="bluefont" @click="handleAgreement('privacy')">《隐私政策》</text>
			</view>
			<view class="loginbtn" :class="phoneNumber && code ? 'blue':'opcatiyblue'" @click="handleLogin">
				<text>登录</text>
			</view>
		</view>
	</view>
	<!--协议确认框-->
	<u-modal :show="show" :showConfirmButton="false" :showCancelButton="false">
		<view class="slot-content">
			<view class="slottop">
				请您认真阅读<text class="bluefont">《用户注册协议》</text>和<text class="bluefont">《隐私政策》</text>的全部条款，同意后可开始使用我们的服务
			</view>
			<view class="slotbot">
				<view class="slotbtn gray" @click="handleCancel">
					<text>不同意</text>
				</view>
				<view class="slotbtn blue" @click="handleConfirm">
					<text>同意</text>
				</view>
			</view>
		</view> 
	</u-modal>
	<!--加入组织-->
	<u-modal :show="orgShow"  :title="title" :showConfirmButton="false" :showCancelButton="false">
		<view class="slot-content">
			<view class="orgslottop">
				非常抱歉，由于您尚未加入租户，目前无法登录使用该小程序。只有成功加入租户后，您才能正常使用。
			</view>
			<view class="slotbot">
				<view class="slotbtn blue" @click="handleConfirm">
					<text>知道了</text>
				</view>
			</view>
		</view> 
	</u-modal>
</template>

<script setup>
import {ref} from 'vue'
import { getCode,Login,LoginBind,wChatLogin,getTenants} from '@/api/login.js'
import { onLoad,onShow} from '@dcloudio/uni-app'
	let phoneNumber = ref('')//电话号码
	let radioType = ref(false)//是否同意协议
	let code = ref('')//验证码
	let show = ref(false)//协议同意提示框
	let orgShow = ref(false)//未加入组织弹框
	let codeShow = ref(true)//显示倒计时
	let title = ref('温馨提示')
	let btntext = ref('发送验证码')
	let seconds = ref(60)//倒计时
	//onLoad接收参数
	onLoad((option)=>{
		console.log('onLoad')
		console.log('参数',option)
	})
	//发送验证码
	const handleSendCode = () =>{
		//判断手机号与验证码
		let reg = /^1[3456789]\d{9}$/
		if(reg.test(phoneNumber.value)){
			getCode({phone:phoneNumber.value}).then(res=>{
				if(res.data.code == 0){
					const timer = setInterval(()=>{
						seconds.value--
						if(seconds.value <= 0){
							codeShow.value = true
							clearInterval(timer);
							btntext.value = '重新发送';
							seconds.value = 60;
						}else{
							codeShow.value = false
							btntext.value = `${seconds.value}s`;
						}
					},1000)
				}else{
					uni.showToast({
						title: res.data.msg,
						icon:'none',
					});
				}
			})
		}else{
			uni.showToast({
				title: '请输入正确的手机号',
				icon:'none',
				duration: 2000
			});
		}
	}
	//点击协议
	const handleAgreement = (val) =>{
		if(val == 'person'){//用户注册协议
			uni.navigateTo({
				url:'/pages/login/agrement'
			})
		}else{//隐私政策
			uni.navigateTo({
				url:'/pages/login/agrement'
			})
		}
	}
	//登录
	const handleLogin = () =>{
		if(radioType.value){//已经选中协议
			let paramsObj = {
				phone: phoneNumber.value,
				smsCode: code.value,
			}
			Login(paramsObj).then(res=>{
				if(res.data.msg !== 'OK'){
					//将验证码置空
					code.value = ''
					uni.showToast({
						title:res.data.msg,
						icon:'none'
					})
					return
				}
				//微信登录绑定判断跳转页面
				let paramsObj = {
					phone: phoneNumber.value,
					smsCode: code.value,
					provider: "sme_wx_mapp_invo_ast",
					channel: "sme_invoice_assistant",
					unionId: uni.getStorageSync('unionId'),
				}
				LoginBind(paramsObj).then(response=>{
					console.log('微信登录绑定',response)
					//UC1005031用户绑定了其他同类型的社交账号
					if(response.data.code == "UC1005031"){
						uni.showToast({
							title:response.data.msg,
							icon:'none'
						})
						return
					}
					let access_token = res.data.info.access_token
					let refresh_token = res.data.info.refresh_token
					let cookie = "access_token=" + access_token + "; refresh_token=" + refresh_token
					uni.setStorageSync('cookie',cookie)
					uni.setStorageSync("phoneNumber", phoneNumber.value)
					uni.setStorageSync('userId', res.data.info.userBasicInfo.id)
					let params = {
						USER_ID:uni.getStorageSync('userId')
					}
					getTenants(params).then(resp=>{
						console.log('租户',resp)
						if(resp.data.code == 0){
							if(resp.data.result.length > 1){//多个租户,跳转选择租户页
								uni.redirectTo({
									url: "/pages/login/chooseorganization",
								});
							}else{
								uni.redirectTo({
									url: "/pages/ticketList/index",
								});
							}
						}else{
							uni.showToast({
								title:resp.data.msg,
								icon:'none'
							})
						}
					})
				})
			})
		}else{//未选中
			console.log('未选中')
			show.value = true
		}
	}
	//协议不同意
	const handleCancel = () =>{
		radioType.value = false
		show.value = false
	}
	//协议同意
	const handleConfirm = () =>{
		radioType.value = true
		show.value = false
	}
</script>

<style lang="scss" scoped>
	::v-deep .is-input-border{
		border:none !important;
		border-radius:8rpx !important;
		background:#F3F4FA !important;
	}
	::v-deep .uni-easyinput__content-input{
		height:80rpx !important;
		line-height: 80rpx !important;
		font-family: PingFangSC-Regular !important;
		font-weight: 400 !important;
		font-size: 32rpx !important;
		color: #A2A2AD !important;
	}
	::v-deep .uni-easyinput__placeholder-class{
		font-family: PingFangSC-Regular !important;
		font-weight: 400 !important;
		font-size: 32rpx !important;
		color: #A2A2AD !important;
	}
	.top{
	   width: 100%;
	   height: 200rpx;
	   background: linear-gradient(to bottom, #e2f0ff 10%, #fff 102%);
	}
	.content{
		width: 100vw;
		height:calc(100vh - 200rpx);
		// background: linear-gradient(to right, #f0f7ff -1%, #fff 102%);
		background:#fff;
		.content-top{
			height: 68rpx;
			line-height: 68rpx;
			margin-bottom:70rpx;
			text-align: center;
			font-family: PingFangSC-Medium;
			font-weight: 500;
			font-size: 44rpx;
			color: #1B1B3D;
			letter-spacing: 6rpx;
		}
		.inputbox{
			padding:0 48rpx;
			.inputbox-top{
				position:relative;
				display: flex;
				flex-direction: column;
				margin-bottom:32rpx;
				.inputlabel{
					height: 40rpx;
					line-height:40rpx;
					margin-bottom:16rpx;
					font-family: PingFangSC-Medium;
					font-weight: 500;
					font-size: 28rpx;
					color: #1B1B3D;
				}
				.sendm{
					position:absolute;
					right:20rpx;
					top:76rpx;
					z-index:99;
					font-family: PingFangSC-Regular;
					font-weight: 400;
					font-size: 28rpx;
					color: #296DFA;
				}
				.seconds{
					position:absolute;
					right:20rpx;
					top:76rpx;
					z-index:99;
					font-family: PingFangSC-Regular;
					font-weight: 400;
					font-size: 28rpx;
					color: #999999;
				}
			}
			.fontbox{
				display: flex;
				justify-content: flex-start;
				align-items: center;
				margin-bottom:100rpx;
				font-size: 24rpx;
				font-family: PingFangSC;
				font-weight: 400;
				color:#A2A2AD;
				.radiobox{
					width:26rpx;
					height:26rpx;
					line-height: 26rpx;
					text-align: center;
					margin-right:12rpx;
					border-radius:50%;
				}
				.borderbox{
					background: #FFFFFF;
					border: 2rpx solid #C5C5C9;
				}
				.bluebg{
					background: #296DFA;
					color:#fff;
					border: 2rpx solid #296DFA;
				}
				.bluefont{
					color:#296DFA;
				}
			}
			.loginbtn{
				height: 80rpx;
				line-height: 80rpx;
				text-align: center;
				border-radius: 40rpx;
				color:#fff;
			}
			.opcatiyblue{
				background: rgba(41,109,250,0.5);
			}
			.blue{
				background: rgba(41,109,250);
			}
		}
	}
	.orgslottop{
		
	}
	.slottop{
		line-height:54rpx;
		color: #1b1b3d;
		font-size: 28rpx;
		font-family: PingFangSC;
		font-weight: 400;
		.bluefont{
			color:#296DFA;
		}
	}
	.slotbot{
		margin:44rpx 48rpx 0;
		display: flex;
		justify-content: space-between;
		align-items: center;
		.slotbtn{
			flex:1;
			height: 64rpx;
			line-height: 64rpx;
			text-align: center;
			border-radius: 32rpx;
			font-family: PingFangSC-Regular;
			font-weight: 400;
			font-size: 32rpx;
		}
		.gray{
			margin-right:46rpx;
			background: #FFFFFF;
			border: 2rpx solid #D9D9D9;
			color: #296DFA;
		}
		.blue{
			background: #296DFA;
			border: 2rpx solid #296DFA;
			color: #FFFFFF;
		}
	}
</style>